<!-- 商家推荐组件 -->
<template>
  <view class="choosed-popup" v-if="goodList.length">
    <view class="choosed-popup-bg" @click="$emit('closePopup')"></view>
    <view class="popup-content">
      <view class="list-head">
        <view>{{ $t("alipay.choosed") }}</view>
        <view class="close-icon" @click="clearCartAll">
          <view class="icon-box" v-if="user_id == startUserId || storeTableNum">
            <image :src="asyncImgs.alipay.delete_grey_icon" />
            <text>{{ $t("alipay.clear") }}</text>
          </view>
        </view>
      </view>
      <view class="popup-list">
        <view class="user-list">
          <view
            class="user-list-item"
            v-for="(item, index) in goodList"
            :key="index"
          >
            <view class="user-info" v-if="storeTableNum || goodList.length > 1">
              <view class="user-data">
                <image :src="item.avatar" mode="" />
                <view class="user-name">{{ item.name }}</view>
              </view>
              <view class="user-action">
                <view
                  class="delete"
                  v-if="item.user_id == user_id"
                  @click="clearChoosed(item.user_id)"
                >
                  <image :src="asyncImgs.alipay.delete_grey_icon" />
                  <text>{{ $t("alipay.clear1") }}</text>
                </view>
              </view>
            </view>
            <view
              class="popup-list-item"
              v-for="(goods, i) in item.goods_list"
              :key="i"
            >
              <view class="good-info">
                <image class="good-pic" :src="goods.goods_pic" mode="" />
                <view class="info-section">
                  <view class="good-name">{{ goods.goods_name }}</view>
                  <view class="good-sku">
                    <text
                      style="margin-right: 6px"
                      v-for="(attr, attrIndex) in goods.attr_list"
                      :key="attrIndex"
                    >
                      {{ attr.attr_group_name }}:{{ attr.attr_name }}
                    </text></view
                  >
                  <view
                    class="good-sku"
                    v-if="goods.food_ext_goods && goods.food_ext_goods.length"
                  >
                    <text
                      style="margin-right: 6px"
                      v-for="(attr, attrIndex) in goods.food_ext_goods"
                      :key="attrIndex"
                    >
                      {{ attr.name }}x{{ attr.num }}
                    </text></view
                  >

                  <view class="price-and-operate">
                    <view class="good-price">
                      <!-- <text>￥</text> -->
                      <!-- <text>{{ (item.price * item.num).toFixed(2) }}</text> -->
                      <text>￥{{ goods.price }}</text>
                    </view>
                    <view
                      class="action-info"
                      v-if="user_id == item.user_id || storeTableNum"
                    >
                      <view class="reduce" @click="selectReduceOne(goods)">
                        <view></view>
                      </view>
                      <view class="num">{{ goods.num }}</view>
                      <view class="add" @click="selectAddOne(goods)">
                        <i class="iconfont icon-add-select"></i>
                      </view>
                    </view>
                    <view class="user-other-num" v-else>x{{ goods.num }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { orderMealMixin } from "../../mixins/index";

export default {
  props: {
    listData: {
      type: Array,
      default: [],
    },
    startUserId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  mixins: [orderMealMixin], //混入文件
  watch: {},
  mounted() {},
  beforeUpdate() {},
  computed: {
    goodList() {
      return this.listData;
    },
  },
  filter: {
    transSkuToWord(val) {
      let str = "";
      val.forEach((d) => {
        str = str + d.name + ": " + d.active + ";";
      });
      return str;
    },
  },
  methods: {
    // 清空购物车
    clearCartAll() {
      uni.showModal({
        title: this.$t("order.prompt"),
        content: this.$t("alipay.confirmClear"),
        success: (res) => {
          if (res.confirm) {
            this.$emit("clearCartAll");
          } else if (res.cancel) {
          }
        },
      });
    },
    // 清空所选商品
    clearChoosed(user_id) {
      this.$emit("clearUserChoosed", { user_id });
    },
    // 添加一个
    selectAddOne(item) {
      if (item.goods_num <= 0) {
        uni.showToast({
          title: this.$t("alipay.noCount"),
          icon: "none",
        });
        return;
      }
      this.$emit("selectAddOne", { item });
    },
    // 减一个
    selectReduceOne(item) {
      item.num--;
      if (item.num <= 0) {
        item.num = 0;
      }
      let params = {
        cart_id: item.cart_id,
        num: item.num,
      };
      this.$emit("selectReduceOne", params);
    },
  },
};
</script>

<style lang="less" scoped>
.choosed-popup {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1001;
  .choosed-popup-bg {
    width: 100%;
    height: 100vh;
    background: #000000;
    opacity: 0.5;
  }
  .popup-content {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: calc(env(safe-area-inset-bottom) + 112rpx);
    z-index: 151;
    background: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 0 36rpx;
    .list-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 3.73vw;
      font-weight: 600;
      line-height: 4.27vw;
      color: #191919;
      padding: 26rpx 0;
      position: relative;
      .close-icon {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 11;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 26rpx 0;

        .icon-box {
          display: flex;
          align-items: center;
          image {
            width: 3.2vw;
            height: 3.2vw;
            background-size: 100%;
            display: block;
            margin-right: 0.53vw;
          }
          text {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
            margin-left: 3rpx;
          }
        }

        .iconfont {
          color: #262626;
          font-weight: 600;
          font-size: 36rpx;
        }
      }
    }
    .popup-list {
      width: 100%;
      max-height: 100vw;
      overflow-y: scroll;
      padding-bottom: 30rpx;
      .user-list {
        width: 100%;
        .user-list-item {
          width: 100%;
          .user-info {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30rpx 0 0 0;
            .user-data {
              display: flex;
              align-items: center;
              image {
                width: 34rpx;
                height: 34rpx;
                background: #ffdfdb;
                border-radius: 50%;
              }
              .user-name {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #8c8c8c;
                margin-left: 6rpx;
              }
            }
            .user-action {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              .delete {
                display: flex;
                align-items: center;
                image {
                  width: 3.2vw;
                  height: 3.2vw;
                  background-size: 100%;
                  display: block;
                  margin-right: 0.53vw;
                }
                text {
                  font-size: 24rpx;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #8c8c8c;
                  margin-left: 3rpx;
                }
              }
            }
          }
        }
      }

      .popup-list-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: 34rpx;
        border-bottom: 1px solid #f8f8f8;
        margin-top: 24rpx;
        .good-info {
          width: 100%;
          display: flex;
          align-items: center;
          .good-pic {
            width: 166rpx;
            height: 166rpx;
            background-color: #f9f9f9;
            background-size: 100% 100%;
            border-radius: 10rpx;
            display: block;
            margin-right: 20rpx;
            flex-shrink: 0;
          }
          .info-section {
            flex: 1;
            .good-name {
              font-size: 3.73vw;
              font-weight: 600;
              line-height: 4.27vw;
              color: #191919;
              max-width: 475rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .good-sku {
              font-size: 3.2vw;
              font-weight: 400;
              line-height: 4.27vw;
              color: #999999;
              margin-top: 10rpx;
            }
            .price-and-operate {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 14rpx;
              .good-price {
                display: flex;
                align-items: center;
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 600;
                color: #262626;
                // text:first-child {
                //   font-size: 2.93vw;
                //   line-height: 3vw;
                // }
              }
            }
          }
        }
        .action-info {
          display: flex;
          align-items: center;
          .reduce {
            width: 44rpx;
            height: 44rpx;
            background: #ffffff;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #f60313;
            view {
              width: 24rpx;
              height: 4rpx;
              background: #f0250e;
            }
          }
          .num {
            font-size: 3.73vw;
            font-weight: 400;
            line-height: 4.27vw;
            color: #191919;
            margin: 0 2.93vw;
          }
          .add {
            width: 44rpx;
            height: 44rpx;
            background: #f60313;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont {
              color: #ffffff;
              font-weight: bold;
              font-size: 36rpx;
            }
          }
        }
        .user-other-num {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
      }
      .popup-list-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0 none;
      }
    }
  }
}
</style>
